<template>
  <div class="main-nav">
    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack"><van-icon name="arrow-left" size="24" /></div>
      <div slot="center">异常设备</div>
    </nav-bar>
    <div v-if="!isNoData">
      <div class="abnormal_box">
        <div class="abnormal-equip" v-for="item in equipList">
          <div class="abnormal">
            <div class="abnormal-one">
              <div>{{item.base_name}}-{{item.house_name}}<span>【{{item.pro_name}}】</span></div>
            </div>
            <div class="abnormal-two">
              <div>异常</div>
            </div>
          </div>
          <div class="abnormal-cont">
            <div class="abnormal-cont-child" v-for="items in item.equip_info">
              <div class="abnormal-cont-child-o">{{items.name}}</div>
              <div class="abnormal-cont-child-t" v-if="items.type==1">
                温度传感器故障
              </div>
              <div class="abnormal-cont-child-t" v-else>
                湿度传感器故障
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else>
      <no-data></no-data>
    </div>
  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar";
  import noData from "@/components/content/nodata";
  export default {
    name: "abnormal",
    components:{
      noData,
      NavBar
    },

    data(){
      return {
        isNoData:false,
        equipList: [],
      }
    },

    created() {
      this.getAbnomalList()
    },
    methods: {
      goBack(){
        this.$router.go(-1);
      },
      getAbnomalList() {
        let that = this;
        that.$http.get('/api/monitorApi/abnomal_equip', {}, r => {
          that.equipList = r.data;
          if(r.data.length==0){
            that.isNoData=true;
          }
        })
      },
    }
  }
</script>

<style scoped>


</style>
